<template>
  <el-table
    :data="paginatedData"
    :height="height"
    :border="border"
    stripe
    style="width: 100%"
    empty-text="暂无数据"
  >
    <template #empty>
      <el-empty description="暂无数据" />
    </template>
    <slot></slot>
  </el-table>
  <div class="pagination" v-if="showPagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next"
      :total="tableData.length"
      background
    />
  </div>
</template>

<script setup>
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  height: {
    type: String,
    default: "60rem",
  },
  border: {
    type: Boolean,
    default: false,
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
});
const paginatedData = computed(() => {
  if (!props.showPagination) {
    return props.tableData;
  }
  const start = (currentPage.value - 1) * pageSize.value;
  const end = currentPage.value * pageSize.value;
  return props.tableData.slice(start, end);
});
const currentPage = ref(1);
const pageSize = ref(10);
</script>

<style lang="scss" scoped>
:deep(.el-table) {
  .cell {
    padding: 0;
  }
}

.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
